﻿@model Coevery.Fields.Settings.DateFieldSettings
@using Coevery.Fields.Settings;

<section class="control-group data-row">
    <label class="control-label">
        Default Value
    </label>
    <div class="controls input-prepend errortips">
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
        </span>
        @Html.TextBoxFor(d => d.DefaultValue, new { @class = "dateForShort", id = "dateDefault", name = "dateDefault" })        
    </div>
    <script>
        function convertShortDate(dateStr) {
            if (dateStr) {
                var tempDate = new Date(dateStr);
                return (tempDate.getMonth()+1).toString() + '/' + tempDate.getDate() + '/' + tempDate.getFullYear();
            } else {
                return "";
            }
        }

        $(document).ready(function () {
            $.validator.addMethod("dateForShort", function (value) {
                return /^\d\d?\/\d\d?\/\d+$/.test(value) || !value;
            }, "Wrong date format,should be MM/dd/yyyy");
            $.validator.classRuleSettings.dateForShort = { dateForShort: true };

            var defaultDate = $("#dateDefault");
            if (defaultDate.length != 0) {
                defaultDate.attr("data-format", "MM/dd/yyyy");
                defaultDate.parent().datetimepicker({
                    pickTime: false
                });
                
                defaultDate.val(convertShortDate(defaultDate.val()));             
            }

            $(".add-on").click(function () {
                setTimeout(function () {
                    $(".bootstrap-datetimepicker-widget").offset(function (index, coords) {
                        var result = { top: 0, left: 0 };
                        result.left = coords.left;
                        result.top = $(".input-append").offset().top - 
                            $(".bootstrap-datetimepicker-widget").outerHeight(true) - 4;
                        return result;
                    });
                }, 0);
            });
        });
    </script>
</section>
